<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left">
				<view class="global-header-left" @click="goBack">
					<view class="global-back-button">
						<text class="global-back-icon">‹</text>
					</view>
					<text class="global-back-text">返回</text>
				</view>
			</view>
			<view class="header-center">
				<text class="header-title">兑换奖品</text>
			</view>
		</view>

		<!-- 内容区域 -->
		<scroll-view class="content" scroll-y="true">
			<!-- 奖品卡片 -->
			<view class="prize-card">
				<text class="prize-name">{{ prizeInfo.name }}</text>
				<text class="prize-desc">{{ prizeInfo.description }}</text>
			</view>

			<!-- 兑换码区域 -->
			<view class="redeem-code-section">
				<!-- 兑换码行 -->
				<view class="section-header">
					<text class="section-label">兑换码</text>
					<button class="copy-btn" @click="copyCode">复制</button>
				</view>
				<view class="code-display-wrapper">
					<text class="code-display">{{ redeemCode || 'XXXXXXX' }}</text>
				</view>
				<!-- 卡密行（有卡密时显示） -->
				<view class="section-header" v-if="redeemSecret">
					<text class="section-label">卡密</text>
					<button class="copy-btn" @click="copySecret">复制</button>
				</view>
				<view class="code-display-wrapper" v-if="redeemSecret">
					<text class="code-display">{{ redeemSecret }}</text>
				</view>
			</view>

			<!-- 使用说明 -->
			<view class="instructions-section">
				<text class="section-label">使用说明</text>
				<view class="divider-line"></view>
				<view class="instructions-list">
					<view class="instruction-item" v-for="(item, index) in instructions" :key="index">
						<text class="instruction-number">{{ index + 1 }}.</text>
						<text class="instruction-text">{{ item }}</text>
					</view>
				</view>
			</view>

			<!-- 提交按钮 -->
			<view class="submit-section">
				<button class="complete-btn" @click="completeRedeem">我已知晓</button>
			</view>
		</scroll-view>
		
		<!-- 底部图片 -->
		<image class="bottom-image" :src="getImageUrl('资源 1-6.png')" mode="widthFix"></image>
	</view>
</template>

<script>
import { getImageUrl } from '@/api/config'

export default {
	data() {
		return {
			prizeInfo: {
				name: '',
				description: '',
				type: '' // 'jd' 或 'qqmusic'
			},
			redeemCode: '',
			redeemSecret: '',
			instructions: []
		}
	},
	onLoad(options) {
		// 从路由参数获取奖品信息
		const prizeTypeParam = options.type || '' // 可能为空，优先使用名称判断
		const code = options.code || 'XXXXXXX'
		const nameFromQuery = options.name ? decodeURIComponent(options.name) : ''
		const secret = options.secret ? decodeURIComponent(options.secret) : ''
		
		this.redeemCode = code
		this.redeemSecret = secret
		
		// 基于名称优先判断类型，其次使用传入的type
		let prizeType = 'jd'
		if (nameFromQuery.includes('京东')) {
			prizeType = 'jd'
		} else if (nameFromQuery.includes('QQ') || nameFromQuery.toLowerCase().includes('qq')) {
			prizeType = 'qqmusic'
		} else if (prizeTypeParam) {
			prizeType = prizeTypeParam
		}
		
		if (prizeType === 'jd') {
			this.prizeInfo = {
				name: '10元 京东E卡',
				description: '兑换码已生成,有效期以京东APP显示为准',
				type: 'jd'
			}
			this.instructions = [
				'打开京东APP',
				'点击"我的"',
				'找到"京东E卡"，点击"绑定新卡"，输入卡密',
				'兑换成功后即可享受相关权益'
			]
		} else if (prizeType === 'qqmusic') {
			this.prizeInfo = {
				name: 'QQ音乐豪华绿钻周卡',
				description: '兑换码已生成,有效期以QQ音乐APP显示为准',
				type: 'qqmusic'
			}
			this.instructions = [
				'打开QQ音乐APP',
				'点击"我的""会员"',
				'找到"兑换VIP",输入兑换码',
				'兑换成功后即可享受相关权益'
			]
		}
		// 若路由中携带了奖品名称，则覆盖默认显示名称
		if (nameFromQuery) {
			this.prizeInfo.name = nameFromQuery
		}
	},
	methods: {
		getImageUrl,
		goBack() {
			uni.navigateBack()
		},
		copyCode() {
			if (!this.redeemCode || this.redeemCode === 'XXXXXXX') {
				uni.showToast({
					title: '兑换码不存在',
					icon: 'none'
				})
				return
			}
			
			// #ifdef H5
			// H5环境
			const textarea = document.createElement('textarea')
			textarea.value = this.redeemCode
			document.body.appendChild(textarea)
			textarea.select()
			document.execCommand('copy')
			document.body.removeChild(textarea)
			uni.showToast({
				title: '复制成功',
				icon: 'success'
			})
			// #endif
			
			// #ifndef H5
			// 小程序环境
			uni.setClipboardData({
				data: this.redeemCode,
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'success'
					})
				}
			})
			// #endif
		},
		copySecret() {
			if (!this.redeemSecret) {
				uni.showToast({
					title: '卡密不存在',
					icon: 'none'
				})
				return
			}
			
			// #ifdef H5
			// H5环境
			const textarea = document.createElement('textarea')
			textarea.value = this.redeemSecret
			document.body.appendChild(textarea)
			textarea.select()
			document.execCommand('copy')
			document.body.removeChild(textarea)
			uni.showToast({
				title: '复制成功',
				icon: 'success'
			})
			// #endif
			
			// #ifndef H5
			// 小程序环境
			uni.setClipboardData({
				data: this.redeemSecret,
				success: () => {
						uni.showToast({
						title: '复制成功',
							icon: 'success'
						})
				}
			})
			// #endif
		},
		completeRedeem() {
			uni.navigateBack()
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background-color: #FEEAF2;
	display: flex;
	flex-direction: column;
	padding: 0;
}

/* 顶部导航栏 */
.header {
	background: transparent;
	padding: var(--status-bar-height, 44rpx) 30rpx 20rpx;
	padding-top: 104rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 1000;
}

.header-center {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
}

.header-title {
	font-size: 36rpx;
	color: #F03C32;
	font-weight: bold;
}

/* 内容区域 */
.content {
	flex: 1;
	padding: 50rpx;
	margin: 0;
	box-sizing: border-box;
	background: #fff;
	border-top-left-radius: 60rpx;
	border-top-right-radius: 60rpx;
}

/* 奖品卡片 */
.prize-card {
	background-color: #FFFFFF;
	border: 1rpx solid #F03C32;
	border-radius: 24rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-sizing: border-box;
}

.prize-name {
	display: block;
	font-size: 32rpx;
	/* font-weight: bold; */
	color: #333333;
	margin-bottom: 12rpx;
}

.prize-desc {
	display: block;
	font-size: 24rpx;
	color: #999999;
	line-height: 1.5;
}

/* 兑换码区域 */
.redeem-code-section {
	background-color: #FEEAF2;
	border-radius: 24rpx;
	padding: 20rpx 30rpx 30rpx;
	margin-bottom: 40rpx;
	box-sizing: border-box;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
	width: 100%;
}

.code-display-wrapper + .section-header {
	margin-top: 24rpx;
}

.section-label {
	font-size: 26rpx;
	/* font-weight: 500; */
	color: #333;
}

.instructions-section .section-label {
	font-size: 28rpx;
	color: #F03C32;
}

.code-display-wrapper {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 28rpx;
	text-align: center;
	box-sizing: border-box;
	border: 1rpx solid #F7D5DD;
	box-shadow: 0 4rpx 10rpx rgba(240, 60, 50, 0.06);
}

.code-display {
	display: block;
	font-size: 34rpx;
	font-weight: 600;
	color: #333333;
	letter-spacing: 2rpx;
	font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
}

.copy-btn {
	height: 48rpx;
	background-color: transparent;
	color: #F03C32;
	border: 1rpx solid #F03C32;
	background: #fff;
	border-radius: 48rpx;
	font-size: 24rpx;
	line-height: 44rpx;
	padding: 0 24rpx;
	flex-shrink: 0;
	margin: 0;
}

.copy-btn::after {
	border: none;
}

/* 使用说明 */
.instructions-section {
	margin-bottom: 30rpx;
	box-sizing: border-box;
}

.instructions-list {
	box-sizing: border-box;
}

.instruction-item {
	font-size: 22rpx;
	display: flex;
	line-height: 1.6;
}

.instruction-item:last-child {
	margin-bottom: 0;
}

.instruction-number {
	font-size: 22rpx;
	color: #777;
	margin-right: 12rpx;
	flex-shrink: 0;
}

.instruction-text {
	font-size: 22rpx;
	color: #777;
	flex: 1;
}

.divider-line {
	height: 1rpx;
	background-color: #cecece;
	margin-top: 5rpx;
	margin-bottom: 20rpx;
}

/* 提交按钮区域 */
.submit-section {
	padding-bottom: 40rpx;
	box-sizing: border-box;
}

.complete-btn {
	width: 100%;
	height: 88rpx;
	background-color: #F03C32;
	color: #FFFFFF;
	border: none;
	border-radius: 24rpx;
	font-size: 32rpx;
	line-height: 88rpx;
	margin-top: 80rpx;
}

.complete-btn::after {
	border: none;
}

/* 全局返回按钮样式 */
.global-back-button {
	width: 60rpx;
	height: 60rpx;
	background: #F03C32;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15rpx;
}

.global-back-icon {
	color: white;
	font-size: 40rpx;
	font-weight: bold;
	line-height: 1;
}

.global-back-text {
	color: #000000;
	font-size: 28rpx;
}

.global-header-left {
	display: flex;
	align-items: center;
}

/* 底部图片 */
.bottom-image {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}
</style>

